import React,{useEffect} from 'react'
import {useDispatch, useSelector} from 'react-redux'
import {useNavigate} from 'react-router-dom'
import axios from 'axios'
import '../../../utils/Data'
import {ALLSTATE,STATETYPE} from '../../../type/store.d'
import { Tabs, Grid } from 'react-vant';

function Classify() {
  const dispatch=useDispatch()
  const navigate=useNavigate()
  useEffect(()=>{
    axios.get('/api/tablist').then((res) => {
      dispatch({
        type: 'SETTAB',
        payload: res.data.tablist
      })
    })
  },[])
  const data1=useSelector((state:ALLSTATE)=>{
    return state.tablist
  })
  const data2=useSelector((state:ALLSTATE)=>{
    return state.children
  })
  const set_index=(index:any)=>{
    dispatch({
      type:'SETINDEX',
      payload:index
    })
  }
  const goto_details=(val:STATETYPE)=>{
    console.log(val)
    navigate(`/details/${val.id}`,{state:val})
  }
  return (
    <div>
      <Tabs sticky swipeable onChange={set_index}>
      {data1.map((item,index) => (
        <Tabs.TabPane key={index} title={item.title}>
          {
            <Grid border={false} columnNum={2}>
            {data2.map((item, index) => (
              <Grid.Item key={index} onClick={()=>goto_details(item)}>
                <p><img src={item.img} alt="" /></p>
                <p>{item.txt}</p>
                <p>价格：{item.price}</p>
              </Grid.Item>
            ))}
          </Grid>
          }
        </Tabs.TabPane>
      ))}
    </Tabs>
    </div>
  )
}

export default Classify